<template>
    <div class="container h-100">
        <div class="apps h-100 br-1">
            <div class="page-title pl-2 v-center">
                <span class="space-between flex-auto pr-2">
                    <span>已分配应用</span>
                    <el-link type="primary" icon="plus" class="cursor-pointer" @click="showAddApp" v-perm="'edit'" />
                </span>
            </div>
            <div
                v-for="app in roleApps"
                class="app-item cursor-pointer hover-primary px-4 lh-4"
                :class="{ current: currentApp.id == app.id }"
                @click="currentApp = app"
            >
                {{ app.name }}
            </div>
            <div v-if="!roleApps.length" class="color-remark text-center mt-4">暂未分配应用</div>
        </div>

        <div class="right">
            <Menus :role="role" :key="currentApp.id" :appId="currentApp.id" v-if="currentApp.id" />
        </div>

        <el-dialog v-model="appVisible" title="添加角色应用" width="400px">
            <base-form :fields="addAppField" v-model="form" ref="formRef"></base-form>
            <template #footer>
                <el-button @click="appVisible = false">取消</el-button>
                <el-button type="primary" @click="doAddApps">确定</el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
import { computed, onMounted, watchEffect } from "vue";
import Menus from "./menus.vue";

const apps = ref([]);
const { role } = defineProps({
    role: Object,
});
let appIds = ref([]);
const roleApps = ref([]);
const appVisible = ref(false);
const addAppField = [{ label: "应用", prop: "appIds", type: "select", multiple: true, options: () => apps.value, required: true }];
const form = ref({});
const formRef = ref();
const currentApp = ref({});

watchEffect(() => {
    roleApps.value = apps.value.filter((item) => appIds.value.includes(item.id));
    if (!currentApp.value.id && roleApps.value.length) {
        currentApp.value = roleApps.value[0];
    }
});

onMounted(() => {
    app.https.get("/sys/app/tenant-can-visit").then((resp) => {
        apps.value = resp;
    });

    loadRoleApps();
});

function loadRoleApps() {
    app.https.post("/sys/role-app/query", { roleId: role.id }).then((resp) => {
        appIds.value = resp.map((item) => item.appId);
    });
}

function showAddApp() {
    appVisible.value = true;
}

function doAddApps() {
    formRef.value.validate((res) => {
        if (!res) {
            return;
        }

        app.https
            .post("/sys/role-app/add-role-apps", {
                roleId: role.id,
                appIds: form.value.appIds,
            })
            .then(() => {
                app.success("操作成功");
                appVisible.value = false;
                loadRoleApps();
            });
    });
}
</script>

<style lang="scss" scoped>
.container {
    display: grid;
    grid-template-columns: 240px 1fr;
    grid-column-gap: 16px;
}

.apps {
    background: var(--follow_bg_color);
    height: 100%;

    .page-title {
        border-bottom: 1px solid var(--main_border_color);
        line-height: 40px;
        margin-bottom: 0;
    }

    .app-item {
        &.current {
            background: var(--primary_color);
            color: #eee;
            font-weight: bold;
        }
    }
}
</style>
